<template>
    <aside class="border-mode-wrap m-b bt-line" v-show="isHidden">
        <h4 class="border-mode__title no-select m-b">边框属性</h4>
        <div class="border-mode__item">
            <h5 class="title">大小</h5>
            <section class="select-size">
                <n-input-number size="small" :min="0" :max="1000" v-model:value="elementAttr.strokeWidth" placeholder="请输入" :on-update:value="onBorderUpdate"/>
            </section>
        </div>
        <div class="border-mode__item">
            <h5 class="title">显隐</h5>
            <n-switch :default-value="true" :on-update:value="onDisplayUpdate">
                <template #checked><span class="title">显示边框</span></template>
                <template #unchecked><span class="title">隐藏边框</span></template>
            </n-switch>
        </div>
        <div class="border-mode__item">
            <h5 class="title">圆角</h5>
            <section class="select-size">
                <n-input-number size="small" :min="0" :max="1000" v-model:value="elementAttr.radius" placeholder="请输入" :on-update:value="onBorderRadiusUpdate"/>
            </section>
        </div>
        <div class="border-mode__item">
            <h5 class="title">颜色</h5>
            <input 
                class="color-input__picker cursor" 
                v-model="elementAttr.stroke" 
                type="color" 
                list=""
                @input="onChangeColor"/>
        </div>
    </aside>
</template>

<script setup name="BorderMode">
import useSharedCore from '@/hooks/shared'
import { nextTick } from 'vue';

const { coverEditor, mixinState } = useSharedCore();
const update = getCurrentInstance();

const elementAttr = reactive({
    strokeWidth: 2,
    stroke: '#18a058',
    radius: 2
})
const allowSet = new Set(['triangle', 'circle', 'polygon', 'rect', 'ellipse', 'group'])

function onDisplayUpdate (val) {
    const node = coverEditor?.canvas?.getActiveObject()
    if (node && allowSet.has(node.type)) {
        node.set({ 
            stroke: val?'#333333':'none',
            strokeWidth: val?3:0
        })
        coverEditor.canvas.renderAll()
    }
}

function onBorderUpdate(val) {
    elementAttr.strokeWidth = val
    setAttributes('strokeWidth', val)
}

function onBorderRadiusUpdate(val) {
    elementAttr.radius = val
    const node = coverEditor?.canvas?.getActiveObject()
    if (node && allowSet.has(node.type)) {
        node.set('rx', elementAttr.radius)
        node.set('ry', elementAttr.radius)
        coverEditor.canvas.renderAll()
    }
}

// triangle|circle|polygon|rect|ellipse
function onChangeColor (evt) {
    const { value = '' } = evt.target
    setAttributes('stroke', value)
}

function setAttributes(key, value) {
    const node = coverEditor?.canvas?.getActiveObject()
    if (node && allowSet.has(node.type)) {
        node.set({ [key]: value })
        coverEditor.canvas.renderAll()
    }
}

const isHidden = computed(() => {
    return allowSet.has(mixinState.mSelectOneType)
})

function getObjectAttr(evt) {
    const active = coverEditor?.canvas?.getActiveObject()
    if (evt && evt.target && evt !== active) return
    if (active) {
        elementAttr.strokeWidth = active['strokeWidth']
        elementAttr.stroke = active['stroke'] || '#18a058'
        elementAttr.radius = active.rx
    }
}

const selectCancel = () => {
   update?.proxy?.$forceUpdate();
};


nextTick(() => {
    coverEditor.on('selectCancel', selectCancel);
    coverEditor.on('selectOne', getObjectAttr)
    coverEditor.canvas.on('object:modified', getObjectAttr);
})

onBeforeUnmount(() => {
    coverEditor.off('selectCancel', selectCancel);
    coverEditor.off('selectOne', getObjectAttr)
    coverEditor.canvas.off('object:modified', getObjectAttr);
})

</script>

<style lang="scss" scoped>
    .border-mode {
        font-size: 14px;
        &__title {
            font-size: 14px;
        }
        &__item {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 12px;
            .title {
                font-size: 14px;
                margin-right: 5px;
            }
            .select-size {
                flex: 1;
            }
            input[type="color"] {
                // border: none;
                // background: none;
                // -webkit-appearance: none;
                // appearance: none;
                border-width: 0px;
                // border-style: none;
                outline: none;
                border-radius: 3px;
            }
        }
    }
</style>